<template>
	<view class="order-detail">
		
		<title :center="false" @titleHeight='setPaddingTop' title="订单详情" iconSize="38" bgcolor="rgba(244, 244, 244, 1)"
			color="rgba(34, 34, 34, 1)" icon="/static/img/other/zuojiantou2.png" :bold="false" :iconSize="45" @toclick="toBack(1)">
		</title>
		
		<view v-if="height" class="">
			<view class="block-1 flex-between align-center ph60 mb30" :style="{'margin-top': height + 'px'}">
				<view class="">
					<view class="f52 fontw bold" style="color: rgba(46, 46, 46, 1);">
						退款成功
						<!-- 交易关闭 -->
					</view>
					<view class="f28 mt10" style="color: rgba(102, 102, 102, 1);">
						如有需要请重新下单~
						<!-- 超时关闭 -->
					</view>
				</view>
				<img src="../static/od-1.png" alt="">
				<!-- <img src="../static/od-3.png" alt=""> -->
			</view>
			
			<view class="block-2 mh20">
				<view class="flex-start align-start">
					<img class='img' :src="orderInfo.orderJson.img" alt="">
					<view class="flex-one">
						<view class="flex-between align-center mb10">
							<text class="f36 fontw bold no-warp-one" style="color: rgba(46, 46, 46, 1);">{{orderInfo.orderJson.mn}}</text>
							<text class="f22" style="color: rgba(102, 102, 102, 1);min-width: fit-content;">共{{orderInfo.orderJson.count}}张</text>
						</view>
						<view class="twoline f24 flex-start align-center medium mb10" style="color: rgba(102, 102, 102, 1);">
							<text>{{orderInfo.orderJson.show_time || ''| getWeekByDay}}</text>
							<text>{{orderInfo.orderJson.show_time || '' | formateDate('MM-DD')}}</text>
							<text>
								{{orderInfo.orderJson.show_time || '' | formateDate('HH:mm')}}~{{orderInfo.orderJson.show_time || '' | endTime(orderInfo.orderJson.dur)}}
							</text>
							<text v-if="orderInfo.orderJson.tp">{{orderInfo.orderJson.tp}}</text>
						</view>
						
						<view class="medium f24" style="color: rgba(34, 34, 34, 1);">
							<text class="mr10"> {{orderInfo.orderJson.hn}}
							</text>{{ !orderInfo.orderJson.trading_seat_string?orderInfo.orderJson.seat:orderInfo.orderJson.trading_seat_string | shufilter(',', ' ', true)}}
						</view>
					</view>
				</view>
				<view class="bottom  mt30">
					<img class='img2' src="../static/od-2.png"/>
					<view class="con ">
						<view class="flex-start align-center">
							<image class="mr10" src="../static/location.png" style='width: 24rpx;height: 24rpx;' alt="" />
							<div style='color:#333333;' class='f24'>
								<text class="mr10 ">{{orderInfo.orderJson.cname}}</text>
								<text>{{orderInfo.orderJson.cn}}</text>
							</div>
						</view>
						<view class="f20" style="color: #666666;">
							<text>{{orderInfo.orderJson.addr}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="m20 block-3">
				<!-- <view class="flex-between align-center ph20 one">
					<text class="f28 bold fontw">实付金额：</text>
					<text class="bold fontw f32" style="color: #FF4345;">￥{{orderInfo.orderJson.price}}</text>
				</view> -->
				<view class="ph20">
					<view class="flex-between align-center mt20 f28">
						<text class="ques">订单编号：</text>
						<text class="ans">{{orderInfo.orderJson.orderno}}</text>
					</view>
					<view class="flex-between align-center mt20">
						<text class="ques">下单时间：</text>
						<text class="ans">{{orderInfo.orderJson.created_at | formateDate('YYYY年MM月DD日 HH:mm:ss')}}</text>
					</view>
					<view class="flex-between align-center mt20">
						<text class="ques">订单金额：</text>
						<text  class="ans">¥{{orderInfo.orderJson.count * orderInfo.orderJson.original_price | toFixed(2)}}</text>
					</view>
					<!-- <view class="flex-between align-center mt20">
						<text  class="ques">优惠金额：</text>
						<text class="ans">¥{{discount | toFixed(2)}}</text>
					</view> -->
				</view>
			</view>
				
		</view>
		
	</view>
</template>
<script>
	import title from '@/pages/components/title.vue'
	export default {
		data() {
			return {
				height: 0,
			}
		},
		props: {
			orderInfo: {
				type: Object,
				default: null
			}
		},
		methods: {
			setPaddingTop(data) {
				this.height = data.height
			},
			// 返回
			toBack(index) {
				this.$parent.toBack(1)
			},
		},
		computed: {
			discount() {
				if(this.orderInfo.orderJson) {
					return (this.orderInfo.orderJson.original_price * this.orderInfo.orderJson.count) - (this.orderInfo.orderJson.price * this.orderInfo.orderJson.count)
				}
				return 0
			},
		},
		components: {
			title
		}
	}
</script>

<style lang="scss" scoped>
	.order-detail {
		background-color: rgba(244, 244, 244, 1);
		// height: 100vh;
		.block-1 {
			img {
				width: 120rpx;
				height: 142rpx;
			}
		}

		.block-2 {
			background-color: white;
			padding: 20rpx 32rpx;
			border-radius: 12rpx;
			
			.img {
				width: 140rpx;
				height: 210rpx;
				border-radius: 12rpx;
				margin-right: 18rpx;
			}

			.twoline {
				text {
					margin-right: 8rpx;

					&:last-of-type {
						display: inline-block;
						background-color: #ECF6F3;
						color: #138E64;
						font-size: 22rpx;
						padding: 3rpx 8rpx;
						border-radius: 6rpx;
					}
				}
			}
			
			.bottom{
				position: relative;
				height: 94rpx;
				
				.img2{
					position: absolute;
					top: 0;
					left: 0;
					height: 100%;
				}
				.con{
					position: relative;
					z-index: 0;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 8rpx 20rpx;
				}
			}
		}
	
		.block-3{
			background-color: white;
			padding: 36rpx 20rpx 32rpx 20rpx;
			border-radius: 12rpx;
			.one{
				padding-bottom: 32rpx;
				border-bottom: 2rpx solid #E8EAEE;
			}
			.ques{
				color: #1D1D1F;
			}
			.ans{
				color: #666666;
			}
		}
	}
</style>
